@use '@angular/material' as mat;
// Background palette for dark themes.
$radial-gradient-background: no-repeat radial-gradient(farthest-side ellipse at 10% 0, #333867, #17193b);
mat.$dark-theme-background-palette: (
  status-bar: black,
  app-bar: map_get(mat.$grey-palette, 900),
  background: #17193b,
  gradient-background: $radial-gradient-background,
  hover: rgba(white, 0.04),
  // TODO(kara): check style with Material Design UX
  // card: rgba(0,0,0,.24),
  card: rgba(23, 25, 59, 0.875),
  dialog: $radial-gradient-background, //#333867,
  disabled-button: rgba(white, 0.12),
  raised-button: rgba(white, 0.12),
  focused-button: $light-focused,
  selected-button: map_get(mat.$grey-palette, 900),
  selected-disabled-button: map_get(mat.$grey-palette, 800),
  disabled-button-toggle: black,
  unselected-chip: rgba(white, 0.12), /* map_get(mat.$grey-palette, 700), */
  disabled-list-option: rgb(12, 10, 10),
  tooltip: map_get(mat.$grey-palette, 700),
  surface: rgba(23, 25, 59, 0.875)
);

// Define an alternate dark theme.
$thin-primary: mat.define-palette(mat.$indigo-palette);
$thin-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
$thin-warn: mat.define-palette(mat.$deep-orange-palette);
$thin-theme: mat.define-dark-theme(
  (
    color: (
      primary: $thin-primary,
      accent: $thin-accent,
      warn: $thin-warn,
    )
  )
);

// In case a theme object has been passed instead of a configuration for
// the color system, extract the color config from the theme object.
// $config: if(_mat-is-theme-object($thin-theme),
//     mat.get-color-config($thin-theme), $thin-theme);
// for Material Components theming
.ngm-theme-thin {
  // @include mat.all-component-colors($thin-theme);
  @include ngm-mat-theme((
    color: mat.get-color-config($thin-theme),
    typography: null,
    density: null,
  ));
}
